<script>

import ConfirmForm from "@/components/pages/ConfirmForm.vue";
import {Loading} from "@element-plus/icons-vue";

export default {
  name: "Home",
  components: {
    Loading,
    ConfirmForm
  },
  data() {
    return {
      imgUrl: '',
      isRegister: true


    }
  },
  methods: {
    showQRCode(url) {
      this.$axios.get(url, {responseType: 'blob'})
          .then(res => {
                const blob = res.data
                this.imgUrl = URL.createObjectURL(blob);
              }
          )
      //120s后重置img
      setTimeout(() => {
        this.imgUrl = ''
      }, 120000)
    }
  }
}
</script>

<template>

  <el-row justify="center" class="full-screen">
    <el-col :span="10" class="centered-content">
      <ConfirmForm @get-url="showQRCode"></ConfirmForm>
    </el-col>
    <el-col :span="10" class="centered-content">
      <el-image :src="imgUrl">
        <template #error>
          <el-icon :size="50">
            <Loading/>
          </el-icon>
          <p>请填写信息</p>
        </template>
      </el-image>
    </el-col>
  </el-row>


</template>

<style scoped>


.full-screen {
  height: 80vh;
}

.centered-content {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>